<template>
    <div class="container">
        <div class="ms-login">
            <div class="login-avatar">
                <el-avatar
                        :size="75"
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                ></el-avatar>
            </div>
            <div class="login-form">
                <el-form
                        ref="login"
                        :model="login"
                        :rules="rules">
                    <el-form-item prop="username">
                        <el-input
                                v-model="login.username"
                                placeholder="账号名/邮箱"
                                prefix-icon="el-icon-user">
                        </el-input>
                    </el-form-item>
                    <div>
                        <el-form-item prop="password">
                            <el-input
                                    v-model="login.password"
                                    placeholder="密码"
                                    prefix-icon="el-icon-lock"
                                    show-password
                                    type="password"
                                    @keyup.enter="submitForm()">
                            </el-input>
                            <br>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <!-- 笔记本上的字 -->
            <div class="login-btn">
                <el-button type="primary" @click="submitForm">登录</el-button>
            </div>
        </div>
        <div id="7w9-5h">
            <div class="lib-comp-text" style="overflow: hidden; opacity: 0.63;">
                <div
                        style="font-size: 52px; font-family: KaiTi_GB2312, KaiTi, STKaiti; text-align: left; color: rgb(0, 0, 0); white-space: pre-wrap; letter-spacing: 0px; word-break: break-word; line-height: 134px; transform-origin: left top; transform: scale(0.5); transition: unset; position: absolute; top: 0; left: 0; width: 398px; min-width: 398px;">
                    <span>“笔迹即脑迹”</span>
                    <div><br></div>
                </div>
            </div>
        </div>
        <div id="7w9-5i">
            <div class="lib-comp-text" style="overflow: hidden; opacity: 0.63;">
                <div
                        style="font-size: 52px; font-family: KaiTi_GB2312, KaiTi, STKaiti,serif; text-align: left; color: rgb(0, 0, 0); white-space: pre-wrap; letter-spacing: 0px; word-break: break-word; line-height: 134px; transform-origin: left top; transform: scale(0.5); transition: unset; position: absolute; top: 0; left: 0; width: 494px; min-width: 494px;">
                    <div>探寻笔迹中的性格<br></div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import Common from "@/api/common";

    function setCookie(name, value, seconds) {
        seconds = seconds || 0;   //seconds有值就直接赋值，没有为0，这个根php不一样。
        let expires = "";
        if (seconds !== 0 ) {      //设置cookie生存时间
            let date = new Date();
            date.setTime(date.getTime()+(seconds*1000));
            expires = "; expires="+date.toGMTString();
        }
        document.cookie = name+"="+escape(value)+expires+"; path=/";   //转码并赋值
    }

    export default {
        data() {
            return {
                login: {
                    username: "",
                    password: "",
                },
                user: {
                    account: null,
                    email: null,
                    password: null,
                },
                rules: {
                    username: [
                        {required: true, message: "请输入用户名", trigger: "blur"},
                    ],
                    password: [
                        {required: true, message: "请输入密码", trigger: "blur"},
                    ]
                }
            }
        },
        created() {

        },
        methods: {
            init() {

            },
            submitForm() {
                // 判断是邮箱还是账户名
                console.log(this.login)
                console.log(this.login.username.search("@") !== -1)
                if (this.login.username.search("@") !== -1) {
                    this.user.email = this.login.username
                } else {
                    this.user.account = this.login.username
                }
                this.user.password = this.login.password;
                Common.userLogin(this.user).then(response => {
                    console.log("登录成功");
                    console.log(response.data.item);
                    localStorage.setItem("SESSION_KEY_USER", response.data.item.account);
                    localStorage.setItem("SESSION_KEY_USERID", response.data.item.id);
                    if(response.data.item.usertype==3){
                        this.$router.push({name:'Super'})
                    }else if(response.data.item.usertype==2){
                        this.$router.push({name:'Admin'})
                    }


                });
            },

        },

    }
</script>

<style scoped>

    /*正常的未被访问过的链接*/
    a:link {
        color: #01d4f0;
    }

    /*已经访问过的链接*/
    a:visited {
        text-decoration: none;
    }

    /*鼠标划过(停留)的链接*/
    a:hover {
        color: rgb(64, 128, 255);
    }

    /* 正在点击的链接，鼠标在元素上按下还没有松开*/
    a:active {
        text-decoration: none;
    }

    .container {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url("../assets/img/writinghand.jpg");
        background-size: 100%;
    }

    .ms-login {
        position: absolute;
        left: 12%;
        top: 21%;
        width: 370px;
        height: 520px;
        border-radius: 28px;
        box-shadow: 4px 4px 15px #6d6a6a;
        background: rgb(250, 250, 250);
        /*overflow: hidden;*/
    }

    .ms-content {
        padding: 30px 30px;
    }

    .login-btn {
        text-align: center;
    }

    .login-btn button {
        width: 128px;
        height: 42px;
        margin-top: 25px;
    }

    .login-avatar {
        height: 200px;
        /*水平垂直居中*/
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login-form {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .el-form {
        /*取消浮动，否者输入框会变为行内元素*/
        /*display: flex;*/
        justify-content: center;
        align-items: center;
    }

    .el-input {
        width: 280px;
    }

    /*系统名*/
    .system-name {
        position: absolute;
        width: 230px;
        height: 160px;
        left: 54%;
        top: 7%;
        border-width: 1px;
        border-color: rgb(0, 151, 136);
        /*如果使用opacity: 设置透明度，那么子元素也会透明，即使子元素设置了不透明也依旧透明，可以设置背景色透明*/
        /*opacity: 1;*/
        background: rgba(245, 235, 235, 0.11);
        border-style: solid;
        border-radius: 44px;
    }

    .system-name-text {
        opacity: 1;
        text-align: center;
        line-height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "Microsoft YaHei", 微软雅黑, -apple-system, BlinkMacSystemFont, "PingFang SC", Helvetica, Tahoma, Arial, sans-serif;
        color: rgb(255, 255, 255);
        font-size: 40px;
    }

    /* 字*/
    #\37 w9-5i {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", Helvetica, Tahoma, Arial, "Microsoft YaHei", 微软雅黑, sans-serif;
        font-size: 13px;
        color: inherit;
        -webkit-box-direction: normal;
        fill: rgb(255, 255, 255);
        position: absolute;
        box-sizing: border-box;
        min-width: 1px;
        min-height: 1px;
        cursor: inherit;
        pointer-events: auto;
        user-select: text;
        transform: translate(555px, 437px) rotate(356deg) scale(0.8, 0.8);
        width: 247px;
        height: 56px;
        transition: unset;
        z-index: 0;
    }

    #\37 w9-5h {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", Helvetica, Tahoma, Arial, "Microsoft YaHei", 微软雅黑, sans-serif;
        font-size: 13px;
        color: inherit;
        -webkit-box-direction: normal;
        fill: rgb(255, 255, 255);
        position: absolute;
        box-sizing: border-box;
        min-width: 1px;
        min-height: 1px;
        cursor: inherit;
        pointer-events: auto;
        user-select: none;
        transform: translate(556px, 387px) rotate(358deg) scale(0.8, 0.8);
        width: 199px;
        height: 56px;
        transition: unset;
        z-index: 0;
    }

    .register-a {
        display: inline;
        font-size: 13px;
    }

    .forget-a {
        position: absolute;
        right: 0;
        text-align: right;
        display: inline;
        font-size: 13px;
    }
</style>
